<template>
	<hyb-page :title="product.g_name">
		<template v-slot:body>

			<!-- 轮播图  -->
			<view>
				<gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" borderRadius="0rpx" :width="750"
					:height="750"></gui-swiper>
			</view>
			<!-- 商品标题 分享按钮 -->
			<view
				class="gui-padding gui-flex gui-row gui-space-between gui-align-items-center gui-bg-white gui-dark-bg-level-3">
				<text class="gui-h5 gui-block product-name gui-block">{{product.g_name}}</text>


				<view class="gui-footer-icon-buttons product-share" hover-class="gui-tap" @tap="favourite(product)">

					<text v-if="product.favorite != null"
						class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe605;</text>
					<text v-else class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe6ad;</text>
					<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">收藏</text>
				</view>

				<view class="gui-footer-icon-buttons product-share">
					<text type="defaul" @tap="makePoster"
						class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe63d;</text>
					<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">海报</text>
				</view>
				<!-- #ifdef MP -->
				<view class="product-share" style="margin-bottom: 6rpx;">
					<button type="defaul" open-type="share"
						class="product-share gui-icons gui-color-orange gui-button gui-noborder"
						style="height: 64rpx;font-size: 40rpx;">&#xe606;</button>
					<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">分享</text>
				</view>
				<!-- #endif -->


				<!-- #ifdef H5 -->
				<view v-if="$store.state.jssdk_status">
					<text type="defaul" @tap="makePoster"
						class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe606;</text>
					<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">分享</text>
				</view>
				<!-- #endif -->
			</view>
			<!-- 价格 -->
			<view class="gui-padding gui-bg-white gui-dark-bg-level-3" style="margin-top:10rpx;">
				<view class="gui-flex gui-row gui-nowrap gui-align-items-center">
					<text v-if="product.hy" class="product-price">￥{{product.vip_jiage}}{{product.g_danwei}}</text>
					<text v-else class="product-price">￥{{product.g_jiage}}{{product.g_danwei}}</text>
					<text class="gui-text gui-color-gray gui-line-through"
						style="margin-left:30rpx;">￥{{product.g_yjiage}}</text>
				</view>
				<view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
					<text class="gui-text-small gui-color-gray">运费 ￥{{product.g_yunfei}}</text>
					<text class="gui-text-small gui-color-gray">已售 {{product.g_xiaoliang}} {{product.g_danwei}}</text>
					<text class="gui-text-small gui-color-gray">积分 {{product.g_jifen}}</text>
				</view>
			</view>

			<view v-if="base.show_base.sf_yhq" class="gui-padding-x gui-bg-white gui-margin-top-small">
				<hyb-yhq :y_style="0" @coupon-status="showCoupon = $event"></hyb-yhq>
			</view>

			<!-- 导购员 -->
			<view v-if="product.users">
				<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;" class="gui-padding">
					<view v-for="(user,index) in product.users" style="display: inline-block;"
						:class="{'gui-margin-left':index>0}" class="gui-bg-white  gui-border-radius">
						<view class="gui-flex gui-justify-content-center gui-padding">

							<image style="width: 120rpx;height: 120rpx;"
								:src="user.u_thumb || $store.state.base.erweima"></image>

							<view class="gui-margin-left gui-flex gui-column gui-justify-content-center">
								<view class="gui-bold" style="color: #999;font-size: 26rpx;">{{user.u_name}}</view>
								<!-- <view class="gui-color-gray" style="font-size: 22rpx;margin-top: 10rpx;">已报备：1/17 人</view> -->
							</view>

							<view class="gui-margin-left gui-flex gui-column gui-space-between">
								<view v-if="false" @tap="chat(user.u_id)"
									style="font-size: 20rpx;border: 2rpx solid #ff0000;"
									class="gui-padding-small gui-color-red gui-border-radius gui-text-center">
									优惠咨询
								</view>
								<view @tap="showWechatQR(user)" style="font-size: 20rpx;border: 2rpx solid #ff0000;"
									class="gui-padding-small gui-color-red gui-border-radius gui-text-center">
									微信
								</view>

								<view @tap="call(user.u_phone)" style="font-size: 20rpx;border: 2rpx solid #ff0000;"
									class="gui-padding-small gui-color-red gui-border-radius gui-text-center gui-icons">
									<span style="font-size: 30rpx;vertical-align: middle;"> &#xe60c;</span> 电话
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 切换导航 -->
			<view class="gui-padding">
				<gui-switch-navigation :items="navItems" :isCenter="true" :size="200" lineHeight="80rpx"
					textAlign="center" activeLineWidth="200rpx" activeLineHeight="2rpx" :margin="10"
					@change="navChange"></gui-switch-navigation>
			</view>
			<!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
			<view class="gui-padding" v-if="active == 0">
				<hyb-rich-text :content="product.g_content"></hyb-rich-text>
			</view>
			<!-- 相关评价 -->
			<view class="gui-padding gui-margin-top" v-if="active == 1">
				<view v-if="pingjiaList && pingjiaList.length > 0" class="pingjia-container">
					<view v-for="(item, index) in pingjiaList" :key="index" class="pingjia-item">
						<view class="pingjia-header">
							<view class="pingjia-user">
								<view class="user-avatar">
									<text v-if="!item.user_avatar"
										class="avatar-text">{{(item.user_name || '用').charAt(0)}}</text>
									<image v-else :src="item.user_avatar" mode="aspectFill"></image>
								</view>
								<view class="user-info">
									<text class="user-name">{{item.user_name || '匿名用户'}}</text>
									<!-- 	<view class="pingjia-score">
										<gui-star :starnum="parseInt(item.score)" :totalstars="5" activecolor="#FF7900" :size="20"></gui-star>
										<text class="score-text">{{item.score}}分</text>
									</view> -->
								</view>
							</view>
							<view class="pingjia-time">
								<text class="time-date">{{formatDate(item.created_at)}}</text>
							</view>
						</view>
						<view class="pingjia-content">
							<text class="pingjia-text">{{item.content}}</text>
						</view>
					</view>
				</view>
				<view v-else class="no-pingjia">
					<text class="gui-text-small gui-color-gray gui-text-center gui-block">暂无评价</text>
				</view>
			</view>

			<!-- 底部 -->
			<view class="product-footer gui-bg-white gui-dark-bg-level-3">
				<!-- 属性选择 -->

				<!-- 底部按钮栏 -->
				<view class="gui-flex gui-row gui-space-between gui-align-items-center gui-border-t">
					<!-- 2个底部按钮 -->



					<view class="gui-footer-icon-buttons" hover-class="gui-tap" @tap="home(product)">
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe608;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">店铺</text>
					</view>


					<!-- #ifdef H5 -->
					<view class="gui-footer-icon-buttons" style="margin-left:30rpx;" hover-class="gui-tap" @tap="kf">
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe626;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">客服</text>
					</view>
					<!-- #endif -->


					<!-- #ifdef MP -->
					<view style="margin-left:30rpx;" v-if="$store.state.base.kefu_flag==1">
						<!-- 微信小程序客服插件聊天 -->
						<button style="height: auto;" open-type="contact"
							class="gui-footer-icon-buttons gui-button gui-noborder">
							<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe626;</text>
							<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">客服</text>
						</button>
					</view>

					<view v-if="$store.state.base.kefu_flag==2" class="gui-footer-icon-buttons"
						style="margin-left:30rpx;" hover-class="gui-tap" @tap="kf">
						<!-- 自己做的留言模式的客服聊天列表 -->
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe626;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">客服</text>
					</view>
					<view v-else class="gui-footer-icon-buttons" style="margin-left:30rpx;" hover-class="gui-tap"
						@tap="call(product.shangjia.s_telphone)">
						<!-- 拨打商家电话 -->
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe626;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">客服</text>
					</view>
					<!-- #endif -->


					<!-- <view class="gui-footer-icon-buttons" hover-class="gui-tap" @tap="kf">
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe60c;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">电话</text>
					</view> -->




					<view class="gui-footer-icon-buttons" style="margin-left:30rpx;" hover-class="gui-tap"
						@tap="goCart">
						<text class="gui-badge gui-bg-red gui-badge-absolute gui-color-white"
							v-if="product.cart_count>0">{{product.cart_count}}</text>
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-red">&#xe60a;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">购物车</text>
					</view>
					<!-- 2个大按钮 -->
					<view
						class="gui-footer-large-buttons gui-flex1 gui-flex gui-row gui-nowrap gui-justify-content-end">
						<view class="gui-footer-large-button gui-bg-orange"
							style="border-bottom-left-radius:50rpx; border-top-left-radius:50rpx;" hover-class="gui-tap"
							@tap="addtocard">
							<text
								class="gui-text gui-text-center gui-block gui-color-white gui-footer-large-button-text">加入购物车</text>
						</view>
						<view class="gui-footer-large-button gui-bg-red"
							v-if="product.g_s_id == userinfo.u_shangjia && ( userinfo.uniacid == 48)"
							style="border-bottom-right-radius:50rpx; border-top-right-radius:50rpx;"
							hover-class="gui-tap" @tap="ck">
							<text
								class="gui-text gui-text-center gui-block gui-color-white gui-footer-large-button-text">出库</text>
						</view>
						<view class="gui-footer-large-button gui-bg-red" v-else
							style="border-bottom-right-radius:50rpx; border-top-right-radius:50rpx;"
							hover-class="gui-tap" @tap="buynow">
							<text
								class="gui-text gui-text-center gui-block gui-color-white gui-footer-large-button-text">立即购买</text>
						</view>


					</view>
				</view>
				<gui-iphone-bottom></gui-iphone-bottom>
			</view>
			<!-- 底部占位 -->
			<view style="height:120rpx;"></view>

			<hyb-poster width="400px" height="600px" ref="poster"></hyb-poster>

			<gui-popup v-if="$store.state.base.show_base.fuwu_gui_ge == 1" ref="guipopup" position="bottom">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-y-middle"
					style="position: relative;padding-top: 60rpx;">

					<text @tap="closePopup" class="gui-icons gui-color-gray"
						style="position: absolute;right:20rpx;top:20rpx;">&#xe610;</text>
					<view class="gui-padding">

						<!-- <view class="gui-card-view gui-bg-white gui-dark-bg-level-3">
							<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
								<image :src="product.x_thumb" class="gui-card-img">
								</image>
								<view class="gui-card-desc" v-if="guige_index>=0">
									<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
										<text class="gui-card-name gui-color-red">￥{{total_money}}</text>
									</view>
									<view class="gui-card-text gui-block gui-secondary-text" style="margin-top:10rpx;">
										已选{{total_count}}件，共计 ￥{{total_money}}元
									</view>
								</view>
							</view>
						</view> -->
						<view>
							<text class="gui-text gui-color-black gui-bold">{{product.g_name}}</text>
						</view>
						<scroll-view scroll-y style="max-height: 68vh;">
							<view>
								<view v-for="(guige,index) in product.g_guigecontent" :key="index"
									class="gui-border-b gui-padding-y gui-bg-gray gui-padding gui-margin-top-middle gui-border-radius gui-flex">

									<view>
										<image @tap="preview(guige.thumb)" :src="guige.thumb||product.g_thumb"
											style="height: 90rpx;width: 90rpx;">
										</image>
									</view>

									<view class="gui-flex1 gui-margin-left">
										<view class="gui-text-small gui-color-gray"
											:class="{'gui-color-red':nums[index]>0}">
											{{guige.name}}
										</view>

										<view class="gui-flex gui-text-small gui-space-between  gui-align-items-center">
											<view class="gui-color-grey gui-bold">￥{{guige.price}} /
												{{product.g_guigename}}
											</view>
											<gui-step-box
												:buttonClass="['gui-color-black', 'gui-step-box-button','gui-border']"
												:inputClass="['gui-step-box-input','gui-border-radius', 'gui-bg-gray', 'gui-dark-bg-level-2','gui-border','gui-margin-x']"
												:value="nums[index] || 0" :index="index" @change="numberChange1">
											</gui-step-box>

										</view>
									</view>
								</view>
							</view>
						</scroll-view>

						<view class="gui-margin-top  gui-bg-white">
							<view>
								<view class="gui-flex gui-justify-content-center" style="align-items: stretch;">
									<view class="gui-flex1 gui-bg-orange gui-color-white  gui-padding-small"
										style="border-top-left-radius: 50rpx; border-bottom-left-radius: 50rpx;">
										<view class="gui-text gui-margin-left gui-bold">￥ {{total_money}} 元</view>
										<view class="gui-text-small gui-margin-left" style="font-size: 24rpx;">
											合计数量：{{total_count}}</view>
									</view>

									<view v-if="isCart" class="gui-flex gui-align-items-center gui-bg-red" @tap="cart()"
										style="border-top-right-radius: 50rpx; border-bottom-right-radius: 50rpx;">
										<text class="gui-color-white gui-button-text gui-padding-x">添加到购物车</text>
									</view>
									<view v-else class="gui-flex gui-align-items-center gui-bg-red" @tap="pay()"
										style="border-top-right-radius: 50rpx; border-bottom-right-radius: 50rpx;">
										<text class="gui-color-white gui-button-text gui-padding-x">立即下单</text>
									</view>

								</view>
							</view>
						</view>

					</view>
				</view>
			</gui-popup>
			<gui-popup v-else ref="guipopup" position="bottom">
				<view class="gui-bg-white gui-dark-bg-level-3">
					<view class="gui-padding">
						<view class="gui-card-view gui-bg-white gui-dark-bg-level-3">
							<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
								<image :src="product.g_thumb" class="gui-card-img">
								</image>
								<view class="gui-card-desc">
									<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
										<text v-if="userinfo.huiyuan"
											class="gui-card-name gui-color-red">￥{{format_money((guige_index>-1?product.g_guigecontent[guige_index].vip_price:product.g_jiage) * num)}}</text>

										<text v-else
											class="gui-card-name gui-color-red">￥{{format_money((guige_index>-1?product.g_guigecontent[guige_index].price:product.g_jiage) * num)}}</text>
									</view>
									<text class="gui-card-text gui-block gui-secondary-text"
										style="margin-top:10rpx;">已选：{{guige_index>-1?product.g_guigecontent[guige_index].name:product.g_guigename}}</text>
								</view>
							</view>
						</view>
						<view class="gui-margin-top">
							<text class="gui-text gui-color-black">{{product.g_guigename}}</text>
						</view>
						<view class="gui-margin-top gui-border-b gui-padding">
							<gui-stags :borderRadius="40" :padding="50"
								:checkedClass="['gui-bg-red', 'gui-dark-bg', 'gui-color-white']" :tags="guiges"
								@change="guiChange"></gui-stags>
						</view>
						<view class="gui-margin-top">
							<text class="gui-text gui-color-black">购买数量</text>
						</view>
						<view class="gui-margin-top gui-border-b gui-padding">
							<gui-step-box :buttonClass="['gui-color-black', 'gui-step-box-button']"
								:inputClass="['gui-step-box-input','gui-border-radius', 'gui-bg-gray', 'gui-dark-bg-level-2']"
								:minNum="1" :value="num" @change="numberChange"></gui-step-box>
						</view>

						<view class="gui-margin-top gui-flex">
							<view class="gui-flex1">
								<button type="default" style="border-radius:50rpx;"
									class="gui-button gui-bg-orange gui-noborder gui-margin-x" @tap="cart()">
									<text class="gui-color-white gui-button-text">添加到购物车</text>
								</button>
							</view>

							<view class="gui-flex1 gui-margin-x">
								<button type="default" style="border-radius:50rpx;"
									class="gui-button gui-bg-red gui-noborder " @tap="pay()">
									<text class="gui-color-white gui-button-text">立即购买</text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</gui-popup>

			<!-- 微信二维码弹窗 -->
			<gui-popup ref="wechatQRPopup" position="center" width="600rpx" :zIndex="9999">
				<view class="gui-bg-white gui-border-radius-large gui-padding">
					<view class="gui-text-center gui-margin-bottom">
						<text class="gui-h6 gui-color-black">微信二维码</text>
					</view>
					<view class="gui-text-center">
						<image v-if="currentUser && currentUser.u_qrcode" :src="currentUser.u_qrcode"
							style="width: 400rpx; height: 400rpx;" mode="aspectFit" />
						<text v-else class="gui-text-small gui-color-gray">暂无二维码</text>
					</view>
					<view class="gui-margin-top gui-text-center">
						<text @tap="closeWechatQR"
							class="gui-bg-blue gui-color-white gui-padding-x gui-padding-y-small gui-border-radius">关闭</text>
					</view>
				</view>
			</gui-popup>

			<!-- 规格出库弹窗 -->
			<view v-if="stockModalVisible" class="stock-modal" @tap="closeStockModal">
				<view class="stock-content" @tap.stop>
					<view class="stock-header">
						<text class="stock-title">规格出库</text>
						<text class="stock-close" @tap="closeStockModal">×</text>
					</view>
					<view class="stock-body">
						<view v-if="stockSpecs && stockSpecs.length > 0">
							<view v-for="(spec, index) in stockSpecs" :key="index" class="stock-spec-item">
								<view class="stock-spec-info">
									<view class="stock-spec-name">{{spec.name}}</view>
									<view class="stock-spec-details">
										<text class="stock-spec-price">¥{{format_money(spec.price)}}</text>
										<text class="stock-spec-current">当前库存:{{spec.stock}}</text>
									</view>
								</view>
								<view class="stock-input-area">
									<text class="stock-input-label">出库数量:</text>
									<input class="stock-input" type="number" v-model="stockFormData[`stock_${index}`]"
										placeholder="1" maxlength="10" />
								</view>
							</view>
						</view>
						<view v-else class="no-stock-specs">
							暂无规格信息
						</view>
					</view>
					<view class="stock-footer">
						<view class="stock-btn stock-btn-cancel" @tap="closeStockModal">取消</view>
						<view class="stock-btn stock-btn-confirm" @tap="submitStockOut">确认出库</view>
					</view>
				</view>
			</view>
		</template>
	</hyb-page>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图 
				swiperItems: [],
				active: 0,
				// 商品信息
				product: {},
				guiges: [],
				guige: {},
				guige_index: -1,
				num: 1,
				// 切换导航
				navItems: [{
					id: 0,
					name: '商品详情'
				}, {
					id: 1,
					name: '相关评论'
				}],
				fenxiao: null,
				id: 0,
				nums: [],
				total_count: 0,
				total_money: 0,
				isCart: false,
				from: '',
				currentUser: null,
				// 规格出库相关数据
				stockModalVisible: false,
				stockSpecs: [],
				stockFormData: {},
				showCoupon: false,
				// 评价相关数据
				pingjiaList: [],
				isLoadingPingjia: false,
			}
		},



		// #ifdef MP
		onShareAppMessage() {
			let path = "/hyb_o2o/subpagesA/pages/goods/goods?id=" + this.product.g_id;
			if (this.fenxiao) {
				path = path + "&f_parentid=" + this.fenxiao.f_id
			}
			return {
				title: this.product.g_name, //分享的标题
				path: path,
				imageUrl: this.product.g_thumb
			};
		},
		//#endif

		computed: {
			userinfo: () => {
				return uni.storage.get("userinfo");
			},

			base: () => {
				return uni.storage.get("base");
			}
		},


		onLoad(options) {
			this.id = options.id;
			if (options.from) this.from = options.from
			if (options.f_parentid) {
				uni.storage.set("f_parentid", options.f_parentid)
			}

			if (this.userinfo.u_fenxiao) {

				uni.gPost("fenxiao/user").then((info) => {
					if (info) {
						this.fenxiao = info;
					}
				})
			}

			uni.gPost("goods/info", {
				id: options.id
			}).then((data) => {
				this.product = data;

				let swiperItems = [];
				this.product.g_thumbs.forEach((img) => {
					swiperItems.push({
						img: img
					})
				})
				if (this.product.g_guigecontent) {
					this.guige_index = 0;
					this.product.g_guigecontent.forEach((item, index) => {
						this.guiges.push({
							id: index,
							text: item.name,
							checked: index == 0 ? true : false
						})
					})
					this.guige = this.product.g_guigecontent[0];
					// 初始化nums数组，确保每个规格都有初始值
					this.nums = new Array(this.product.g_guigecontent.length).fill(0);
				}
				this.swiperItems = swiperItems;
			})
		},

		onUnload() {
			// 页面卸载时清理所有Toast和Loading状态
			try {
				uni.hideLoading();
				uni.hideToast();
			} catch (e) {
				console.log('清理Toast状态时出错:', e);
			}
		},

		onHide() {
			// 页面隐藏时也清理状态
			try {
				uni.hideLoading();
			} catch (e) {
				console.log('隐藏页面时清理Loading状态出错:', e);
			}
		},
		methods: {
			// 格式化金额为2位小数
			format_money(val) {
				return parseFloat(val || 0).toFixed(2);
			},
			ck() {
				// 检查商品是否有规格
				if (this.product.g_guigecontent && this.product.g_guigecontent.length > 0) {
					// 有规格，显示规格出库弹窗
					this.stockSpecs = JSON.parse(JSON.stringify(this.product.g_guigecontent));
					this.stockFormData = {};
					// 初始化每个规格的出库数量为1
					this.stockSpecs.forEach((spec, index) => {
						this.stockFormData[`stock_${index}`] = 1;
					});
					this.stockModalVisible = true;
				} else {
					// 无规格，使用原来的简单出库方式
					uni.showModal({
						title: '出库',
						editable: true,
						placeholderText: '请输入出库数量',
						success: (res) => {
							if (res.confirm) {
								const num = Number(res.content)
								if (isNaN(num) || num <= 0) {
									uni.showToast({
										title: '请输入正确出库数量',
										icon: 'none'
									})
								} else {
									uni.gPost("goods/stock", {
										g_id: this.product.g_id,
										stock: num
									}).then((info) => {
										uni.showToast({
											title: '出库成功'
										})
									})
								}
							}
						}
					})
				}
			},

			chat(id) {
				uni.navigateTo({
					url: '/hyb_o2o/kefunew/list?js_u_id=' + id + '&tag=yh'
				})
			},
			call(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					})
				}
			},
			closePopup() {
				this.$refs.guipopup.close();
			},

			preview(url) {
				uni.previewImage({
					urls: [url ? url : this.product.g_thumb]
				})
			},

			numberChange1: function(e) {
				console.log('numberChange1 - 接收到的参数:', e);
				console.log('numberChange1 - 当前nums:', this.nums);

				// 确保nums数组的每个元素都有初始值
				if (!this.nums || this.nums.length === 0) {
					this.nums = new Array(this.product.g_guigecontent.length).fill(0);
				}

				// 使用Vue.set确保响应式更新
				this.$set(this.nums, e[1], e[0]);
				console.log('numberChange1 - 更新后nums:', this.nums);

				let count = 0;
				let money = 0;
				// 会员折扣健壮性保护
				const zhekou = (this.userinfo && this.userinfo.huiyuan_xq && this.userinfo.huiyuan_xq.h_zhekou) ? this
					.userinfo.huiyuan_xq.h_zhekou : 1;
				const isVip = this.userinfo && this.userinfo.huiyuan;

				this.product.g_guigecontent.forEach((guige, index) => {
					if (this.nums[index] == undefined) this.nums[index] = 0
					count += this.nums[index];
					if (isVip) {
						if (guige.vip_price > 0) {
							money += this.nums[index] * guige.vip_price;
						} else {
							money += this.nums[index] * guige.price * zhekou;
						}
					} else {
						money += this.nums[index] * guige.price;
					}
				})
				this.total_count = parseFloat(count).toFixed(0);
				this.total_money = parseFloat(money).toFixed(2);
				console.log('numberChange1 - 最终计算结果:', {
					count: this.total_count,
					money: this.total_money
				});
			},

			home() {
				uni.navigateTo({
					// url: '/hyb_o2o/subpagesA/pages/shop/shop?id=' + this.product.g_s_id
					url: '/hyb_o2o/shangjia/info/info?id=' + this.product.g_s_id
				})
			},

			favourite(item) {
				uni.gPost("goods/favorite", {
					g_id: item.g_id
				}).then((info) => {
					if (info) {
						this.product.favorite = info;
					} else {
						this.product.favorite = null;
					}
				})
			},

			guiChange(e) {
				this.guige_index = e.id;
			},

			numberChange(e) {
				this.num = e[0];
			},

			goCart() {
				// uni.navigateTo({
				// 	url: "/hyb_o2o/subpagesA/pages/cart/cart"
				// })
			},

			makePoster() {



				//通过后台生成
				let param = {
					id: this.id
				};
				// #ifdef MP
				param["from"] = "mp";
				// #endif

				uni.gPost("goods/poster", param).then((res) => {
					uni.previewImage({
						urls: [res],
						current: 0
					})
				})
				return;

				let path = "/hyb_o2o/subpagesA/pages/goods/goods?id=" + this.product.g_id;
				if (this.fenxiao) {
					path = path + "&f_parentid=" + this.fenxiao.f_id
				}


				let items = [{
						type: "image",
						url: this.product.g_thumb,
						x: 15,
						y: 15,
						width: 370,
						height: 300,
					},
					{
						type: "text",
						text: this.product.g_name,
						x: 15,
						y: 350
					},
					// #ifdef H5
					{
						type: "qrcode",
						text: window.location.href.split("#")[0] + "#" + path,
						x: 305,
						y: 335,
						width: 80
					},
					// #endif


					// #ifdef MP
					{
						type: "image",
						url: 'https://xjz.cyygkj.cn/api/mp/qrcode?path=' + encodeURIComponent(path) + '&uniacid=' +
							this.base.uniacid,
						x: 305,
						y: 335,
						width: 80
					},
					// #endif
					{
						type: "text",
						text: this.product.g_name,
						size: 12,
						color: "gray",
						x: 15,
						y: 375
					},
					{
						type: "text",
						text: "￥" + this.product.g_jiage,
						color: "red",
						x: 15,
						y: 405
					},

					{
						type: "image",
						url: this.userinfo.u_thumb || this.base.erweima,
						x: 15,
						y: 430,
						width: 80,
						height: 80,
						circle: true
					},
					{
						type: "text",
						text: "Can",
						x: 110,
						y: 460
					},

					{
						type: "text",
						text: "好商品持续为您分享...",
						size: 12,
						color: "gray",
						x: 110,
						y: 490
					},
					{
						type: "text",
						text: this.base.name,
						color: "orange",
						align: "center",
						x: 200,
						y: 540
					},
					{
						type: "text",
						text: "—— " + this.product.shangjia.s_name + " ——",
						color: "gray",
						size: 12,
						align: "center",
						x: 200,
						y: 580
					}
				]


				this.$refs.poster.make(items).then((src) => {
					uni.previewImage({
						urls: [src]
					})
				})
			},

			downloadFile(url) {
				return "https://xjz.cyygkj.cn/api/file/download?url=" + encodeURIComponent(url);
			},
			// 分享
			share: function() {
				let path = "/hyb_o2o/subpagesA/pages/goods/goods?id=" + this.product.g_id;
				if (this.fenxiao) {
					path = path + "&f_parentid=" + this.fenxiao.f_id
				}
				//公众号分享
				let url = window.location.href.split("#")[0] + "#" + path
				uni.$jswx.wxShare({
					title: this.base.name,
					url: url,
					content: this.product.g_name,
					image: this.product.g_thumb,
				}).then((flag) => {
					if (flag) {
						uni.showToast({
							title: "请点击右上角分享!",
							icon: "none"
						})
					}
				})
			},
			// 导航切换
			navChange: function(e) {
				this.active = e;
				// 如果切换到评价页面，获取评价数据
				if (e === 1 && this.pingjiaList.length === 0 && !this.isLoadingPingjia) {
					this.getPingjiaList();
				}
			},

			// 获取评价列表
			getPingjiaList: function() {
				if (!this.product.g_id) {
					return;
				}

				// 防止重复调用
				if (this.isLoadingPingjia) {
					return;
				}

				this.isLoadingPingjia = true;

				try {
					uni.showLoading({
						title: '加载评价中...'
					});
				} catch (e) {
					console.log('显示Loading失败:', e);
				}

				// 临时使用现有接口获取评价数据
				uni.gPost("pingjia/list", {
					g_id: this.product.g_id,
					p_type: 2, // 商品评价类型
					uniacid: this.base.uniacid || 58
				}).then((res) => {
					try {
						uni.hideLoading();
					} catch (e) {
						console.log('隐藏Loading失败:', e);
					}
					console.log('评价列表:', res);
					this.pingjiaList = res || [];
				}).catch((err) => {
					try {
						uni.hideLoading();
					} catch (e) {
						console.log('隐藏Loading失败:', e);
					}
					console.error('获取评价失败:', err);
					this.pingjiaList = [];
				}).finally(() => {
					this.isLoadingPingjia = false;
				});
			},

			// 格式化日期
			formatDate: function(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			// 返回首页
			goHome: function() {
				uni.switchTab({
					url: "首页路径"
				});
			},
			// 返回首页
			kf: function() {
				if (!this.$store.state.base.kefu_lx) {
					console.log(this.product.shangjia.s_telphone)
					// uni.makePhoneCall({
					// 	phoneNumber:this.product.shangjia.s_telphone
					// })
					uni.navigateTo({
						url: "/hyb_o2o/kefunew/user_list?tag=yh"
					})
				} else {
					// uni.navigateTo({
					// 	url: "/hyb_o2o/kefunew/user_list?tag=yh"
					// })
					uni.navigateTo({
						url: "/hyb_o2o/kefunew/user_list?tag=yh"
					})
				}
			},
			// 加入购物车
			addtocard: function() {
				// 选择属性
				this.isCart = true
				// 确保nums数组正确初始化
				if (this.product.g_guigecontent && this.product.g_guigecontent.length > 0) {
					if (!this.nums || this.nums.length !== this.product.g_guigecontent.length) {
						this.nums = new Array(this.product.g_guigecontent.length).fill(0);
					}
					console.log('addtocard - nums:', this.nums);
				}
				this.$refs.guipopup.open();
			},

			cart() {

				if (this.$store.state.base.show_base.fuwu_gui_ge == 1) {
					const nums = [];
					const indexs = [];

					this.nums.forEach((v, index) => {
						if (v) {
							nums.push(v)
							indexs.push(index)
						}
					})

					uni.gPost("goods/cart/add", {
						g_id: this.product.g_id,
						g_nums: nums,
						guige_indexs: indexs
					}).then((res) => {
						this.product.cart_count = res;
						this.$refs.guipopup.close();
						uni.showToast({
							title: "添加成功"
						})
					})
				} else {
					uni.gPost("goods/cart/add", {
						g_id: this.product.g_id,
						g_num: this.num,
						guige_index: this.guige_index
					}).then((res) => {
						this.product.cart_count = res;
						this.$refs.guipopup.close();
						uni.showToast({
							title: "添加成功"
						})
					})
				}


			},
			// 购买 
			buynow: function() {
				// 选择属性
				this.isCart = false
				// 确保nums数组正确初始化
				if (this.product.g_guigecontent && this.product.g_guigecontent.length > 0) {
					if (!this.nums || this.nums.length !== this.product.g_guigecontent.length) {
						this.nums = new Array(this.product.g_guigecontent.length).fill(0);
					}
					console.log('buynow - nums:', this.nums);
				}
				this.$refs.guipopup.open();
			},


			pay() {
				let list = []
				if (this.$store.state.base.show_base.fuwu_gui_ge == 1) {
					this.nums.forEach((num, index) => {
						if (num > 0) {
							list.push({
								goods: this.product,
								g_num: num,
								guige_index: index
							});
						}
					})
				} else {
					list.push({
						goods: this.product,
						g_num: this.num,
						guige_index: this.guige_index
					});
				}
				if (list.length == 0) {
					uni.showToast({
						title: '请添加商品数量',
						icon: 'none'
					})
					return
				}
				uni.storage.set("goods_list", list);
				uni.navigateTo({
					url: "/hyb_o2o/subpagesA/pages/pay/pay"
				})
			},

			showWechatQR(user) {
				this.currentUser = user;
				this.$refs.wechatQRPopup.open();
			},
			closeWechatQR() {
				this.$refs.wechatQRPopup.close();
			},

			// 关闭规格出库弹窗
			closeStockModal() {
				this.stockModalVisible = false;
				this.stockSpecs = [];
				this.stockFormData = {};
			},

			// 提交规格出库
			submitStockOut() {
				// 检查是否有出库数量
				let hasStockOut = false;
				let stockData = [];

				this.stockSpecs.forEach((spec, index) => {
					const stockOut = parseInt(this.stockFormData[`stock_${index}`]) || 0;
					if (stockOut > 0) {
						hasStockOut = true;
						stockData.push({
							index: index,
							name: spec.name,
							stock_out: stockOut,
							current_stock: spec.stock
						});
					}
				});

				if (!hasStockOut) {
					uni.showToast({
						title: '请至少输入一个规格的出库数量',
						icon: 'none'
					});
					return;
				}

				// 验证出库数量不能超过库存
				for (let item of stockData) {
					if (item.stock_out > item.current_stock) {
						uni.showToast({
							title: `${item.name}出库数量不能超过库存${item.current_stock}`,
							icon: 'none'
						});
						return;
					}
				}

				// 提交出库请求
				uni.gPost("goods/stock_specs", {
					g_id: this.product.g_id,
					stock_data: stockData
				}).then((res) => {
					console.log('出库响应:', res);
					console.log('响应类型:', typeof res);
					console.log('响应内容:', JSON.stringify(res));

					// 检查响应结果 - 支持多种响应格式
					let isSuccess = false;

					if (res) {
						if (res.success === true || res.success === 1) {
							isSuccess = true;
						} else if (typeof res === 'string' && res.includes('成功')) {
							isSuccess = true;
						} else if (typeof res === 'object' && res.success !== false) {
							isSuccess = true;
						}
					}

					if (isSuccess) {
						uni.showToast({
							title: '出库成功',
							icon: 'success'
						});
						this.closeStockModal();
						// 刷新商品详情
						uni.gPost("goods/info", {
							id: this.product.g_id
						}).then(res => {
							this.product = res;
						});
					} else {
						uni.showToast({
							title: (res && res.msg) ? res.msg : '出库失败',
							icon: 'none'
						});
					}
				}).catch((err) => {
					console.error('出库请求失败:', err);
					uni.showToast({
						title: '出库失败',
						icon: 'none'
					});
				});
			},
		}
	}
</script>

<style>
	.ck {
		background-color: #FF7900;
	}

	/* 规格出库弹窗样式 */
	.stock-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stock-content {
		background-color: #fff;
		border-radius: 20rpx;
		width: 90%;
		max-height: 80%;
		overflow: hidden;
	}

	.stock-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.stock-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.stock-close {
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stock-body {
		padding: 30rpx;
		max-height: 600rpx;
		overflow-y: auto;
	}

	.stock-spec-item {
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
	}

	.stock-spec-info {
		margin-bottom: 20rpx;
	}

	.stock-spec-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.stock-spec-details {
		display: flex;
		gap: 20rpx;
	}

	.stock-spec-price {
		color: #e6a23c;
		font-weight: bold;
		font-size: 26rpx;
	}

	.stock-spec-current {
		color: #909399;
		font-size: 26rpx;
	}

	.stock-input-area {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.stock-input-label {
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;
	}

	.stock-input {
		flex: 1;
		border: 1rpx solid #e5e5e5;
		border-radius: 8rpx;
		padding: 15rpx;
		font-size: 26rpx;
		background-color: #fff;
	}

	.stock-footer {
		display: flex;
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		gap: 20rpx;
	}

	.stock-btn {
		flex: 1;
		text-align: center;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.stock-btn-cancel {
		background-color: #f5f5f5;
		color: #666;
	}

	.stock-btn-confirm {
		background-color: #e6a23c;
		color: #fff;
	}

	.no-stock-specs {
		text-align: center;
		color: #c0c4cc;
		padding: 60rpx 0;
		font-style: italic;
	}

	.product-name {
		width: 560rpx;
		line-height: 50rpx;
	}

	.product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 50rpx;
		color: #FF7900;
		line-height: 80rpx;
	}

	.product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.gui-common-line {
		height: 18rpx;
	}

	.product-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.product-attr {
		width: 700rpx;
		margin: 25rpx;
		height: 580rpx;
	}

	.gui-padding {
		padding: 20rpx 25rpx;
	}

	.gui-footer-icon-buttons {
		width: 100rpx;
	}

	.gui-card-view {
		padding: 25rpx;
		margin-top: 30rpx;
	}

	.gui-card-body {
		padding-bottom: 30rpx;
	}

	.gui-card-img {
		width: 140rpx;
		height: 140rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
	}

	/* 评价相关样式 */
	.pingjia-container {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}

	.pingjia-item {
		padding: 32rpx;
		border-bottom: 1rpx solid #f5f5f5;
		transition: background-color 0.2s ease;
	}

	.pingjia-item:last-child {
		border-bottom: none;
	}

	.pingjia-item:hover {
		background-color: #fafafa;
	}

	.pingjia-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.pingjia-user {
		display: flex;
		align-items: flex-start;
		flex: 1;
	}

	.user-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		border: 2rpx solid #f0f0f0;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.avatar-text {
		font-size: 28rpx;
		color: #666;
		font-weight: 600;
	}

	.user-info {
		flex: 1;
		min-width: 0;
	}

	.user-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 12rpx;
		display: block;
		line-height: 1.4;
	}

	.pingjia-score {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.score-text {
		font-size: 26rpx;
		color: #FF7900;
		margin-left: 16rpx;
		font-weight: 500;
	}

	.pingjia-time {
		font-size: 24rpx;
		color: #999;
		text-align: right;
		line-height: 1.4;
		min-width: 120rpx;
	}

	.time-date {
		font-size: 24rpx;
		color: #999;
	}

	.pingjia-content {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		border-left: 4rpx solid #FF7900;
	}

	.pingjia-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		word-break: break-all;
	}

	.no-pingjia {
		padding: 120rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
</style>